<!--推送消息-->
<template>
	<div class="app">

		<common-header :tittle="tittle" :showback="true" :clear="clearAll"></common-header>

		<div class="box">
			<!-- 最新内容 -->
			<div class="latestContents">

				<div class="tracks" v-for="item in tracks" :key="item.id">
					<h3 v-text="item.data"></h3>
					<ul>
						<li>
							<p v-text="item.detail"></p>
							<span class="" v-text="item.types"></span>
						</li>
					</ul>
				</div>
				
				<div v-show="nolist" class="nolist">
					<img src="@/assets/imgs/my/nocollection@2x.png" alt="" />
					<span>暂无消息</span>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import commonHeader from 'common/common-header-back'
	var proData = [{
			'text': '必由之路第七集速览 解说词  第八集速览',
			'type': "体验",

			'imgSrc': require('@/assets/imgs/thr_mg3.png'),
			'link': "www.baidu.com",
		},
		{
			'text': '必由之路第七集速览 解说词  第八集速览',
			'type': "体验",

			'imgSrc': require('@/assets/imgs/thr_mg3.png'),
			'link': "www.baidu.com",
		},
		{
			'text': '必由之路第七集速览 解说词  第八集速览',
			'type': "体验",

			'imgSrc': require('@/assets/imgs/thr_mg3.png'),
			'link': "www.baidu.com",
		},

	]

	var tracks = [{
			"data": '2018-12-10 11:00:00',

			'detail': '咖啡生长环境条件|咖啡对温度、湿度、光照和土 壤要求',
			'types': '生长环境'

		},
		{
			"data": '今天',

			'detail': '咖啡生长环境条件|咖啡对温度、湿度、光照和土 壤要求',
			'types': '生长环境'

		},

	]

	export default {
		data() {
			return {
				clearAll: true,
				tracks: tracks,
				tracks:false,
				showPrise: false,
				nolist: true,
				latestContents: false,
				demo1: false,
				proData: proData,
				selectArr: [],
				tittle: '推送消息',
				num: 0,

			}
		},

		methods: {

		},

		components: {

			commonHeader,

		},
		computed: {}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";
	.hello {
		h1 {
			color: red;
			.fs(38);
		}
	}
	
	.box {
		margin-top: 50px;
		font-size: 15px;
	}
	

	
	.nolist {
		margin: 0 auto;
		margin-top: 143px;
		height: 85px;
		width: 85px;
		img {
			width: 100%;
			height: 100%;
		}
		span {
			font-size: 12px;
			font-weight: 500;
			color: rgba(204, 204, 204, 1);
		}
	}
	
	.tracks {
		h3 {
			background-color: #ECECEC;
			display: inline-block;
			border-radius: 20px;
			height: 20px;
			line-height: 20px;
			padding:3px 10px;
			
			color: @base-sp-text-color9;
			text-align: center;
			font-size: 12px;
		}
		ul {
			padding:20px 0px;
			
			li {
				border-bottom:1px solid @border-color;
				padding:0 15px 10px 15px;
				p {
					font-size: 16px;
					text-align: left;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
					margin-bottom: 20px;
				}
				span {
					text-align: left;
					font-size: 12px;
					font-weight: 500;
					display: block;
					color: rgba(204, 204, 204, 1);
				}
				
			}
		}
	}
	.latestContents{
		padding-top:30px;
	}
	.app{
		background: #fff;
	}
</style>